<template>
  <view class="container">
    <view class="detail">课程名</view>
    <table style="width:90%;height: 60vh;margin-top: 30rpx;">
      <thead>
      <tr style="background-color: #ccc">
        <th>序号</th>
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>考试成绩</th>
        <th>平时成绩</th>
        <th>最终成绩</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item, index) in courseData" :key="index">
        <td>{{ item.id }}</td>
        <td>{{ item.studentId }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.sex }}</td>
        <td class="usual-score-cell"><input type="text" v-model="item.examScore" @blur="inputExamScore(item.id)" placeholder="输入"></td>
        <td class="usual-score-cell"><input type="text"  v-model="item.usualScore" @blur="inputUsualScore(item.id)" placeholder="输入"></td>

        <td>{{ item.endScore }}</td>
      </tr>
      </tbody>
    </table>

    <view style="display: flex;margin-top: 60rpx;">
      <button class="button" @click="input">上传</button>
    </view>
  </view>
</template>
<script>
import teacher from "../../api/teacher";
import {InputGradesForm} from "../../api/teacher/type";
export default {
  data() {
    return {
      usualScore: 0,
      examScore: 0,
      inputForm: {
        courseId: 0,
        examScore: [],
        usualScore: []
      },

      courseData: [{
        id: 0,
        courseId: 0,
        courseName: '',
        studentId: 0,
        name: '',
        sex: '',
        examScore: 0
      },
      ],
      tableData: [
        {
          id: 0,
          studentId: 0,
          name: '',
          sex: '',
          examScore: 0,
          usualScore: 0,
          endScore: 0
        }],


    }
  },
  methods: {
    //录入平时成绩到数组
    inputUsualScore(id) {
      const item = this.courseData.find(item => item.id === id)
      console.log(this.courseData)
    },
    //录入考试成绩到数组
    inputExamScore(id) {
      const item = this.courseData.find(item => item.id === id)
      console.log(this.courseData)
    },
    //查看某门考试的学生成绩
    async view(id) {
      try {
        const res = await teacher.getGrade(id)
        this.courseData = res.data
        console.log('=======================',this.courseData)
      } catch (e) {
        return Promise.reject(e)
      }
    },
    //录入成绩
    async input() {
      this.inputForm.usualScore = this.courseData.map(item => item.usualScore)
      this.inputForm.examScore = this.courseData.map(item => item.examScore)
      try {
        const res = await teacher.inputGrades(this.inputForm)
        this.courseData = res.data
        if (res.code === 200) {
          uni.showToast({
            title: '上传成功!',
            icon: 'success',
            duration: 1000
          });
        } else {
          uni.showToast({
            title: '上传失败，请检查数据是否合理填满!',
            icon: 'fail',
            duration: 1000
          });
        }
      } catch (e) {
        return Promise.reject(e)
      }
    },
  },
  async onLoad(option) {
    console.log(Number(option.id))
    await this.view(Number(option.id))
    this.inputForm.courseId = Number(option.id)
  }


}
</script>
<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */
}

.detail {
  width: 90%;
  height: 40px;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  text-align: center; /* 确保单行文本居中 */
  font-weight: bold;
  font-size: 22px;
  margin-top: 10px;
}

table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  font-size: 14px;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
  word-wrap: break-word;
  white-space: pre-line;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
}


.button {
  border: 0;
  background-color: #bebdbd;
  color: white;
  width: 180rpx;
  font-size: 14px;
}

</style>